<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 加了定位行内元素可以设置宽高，块级元素不设置宽高就以内容宽高 */



        /* 父相子绝  
        如果父元素没有设置相对定位子元素绝对定位就找到最外边的body进行绝对定位*/
        /* 相定位保留来位置，绝对定位不保留原来位置 */
        .retlvue {
            position: relative;
            /* 设置了绝对定位就不保留原来位置了 */
            /* position: absolute; */
            width: 300px;
            height: 300px;
            background-color: rgb(182, 13, 13);
        }

        .abo {
            /* 相定位保留来位置， position: absolute绝对定位不保留原来位置 */
            /* 值：top，left，button，right */
            position: absolute;
            /* 定位居中  
            left: 50%;
            在往左盒子一半
            margin-left: -50px;*/
            left: 50%;
            margin-left: -50px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }


        /* position: fixed;固定定位不保留之前位置，永远以浏览器可视窗口对齐 */
        /* 值：top，left，button，right */
        .fixe {
            width: 800px;
            height: 1000px;
            margin: 0 auto;
            background-color: pink;
        }

        .x {
            position: fixed;
            left: 50%;
            top: 20px;
            margin-left: 405px;
            width: 100px;
            height: 100px;
            background-color: rgb(116, 33, 217);
        }

        /* 粘性定位  position: sticky;*/
        /* 值：top，left，button，right */
        .sticky {
            position: sticky;
            /* 顶部距离为零时就就不跟着滑动条动了 占用在位置 */
            top: 0;
            width: 800px;
            height: 50px;
            background-color: aqua;
            margin: 500px auto;
            z-index: 999;
        }
       


        .fexl{
            /* position: relative; */
            position: fixed;
            left: 0;
            top: 0;
            width: 400px;
            height: 200px;
            background-color: aqua;
        }
        .fexl div:nth-child(1){
            position: absolute;
            left: 50px;
            top: 20px;
            width: 100px;
            height: 50px;
            background-color: bisque;
        }
    </style>
</head>

<body>
    


   <div class="sticky">position: sticky;我是粘性定位</div>

    <div class="fixe">
        <!-- 相对定位，绝对定位 -->
        <div class="retlvue">
            我是父元素 position: relative;相对定位
            <div class="abo">
                我是子元素 position: absolute;<br> 绝对定位
            </div>
        </div>
    </div>
    <div class="x"> position: fixed;<br> 我是固定定位</div>

    <hr>

    <div class="fexl">
        <div></div>
        <div></div>
    </div>
</body>

</html>